<!--图片标记-->
<template>
  <div class="container" v-loading="isLoading" element-loading-text="数据加载中..." element-loading-background="rgba(0, 0, 0, 0.8)">
    <!--顶部工具栏-->
    <div class="top-tool">
      <!--左上角盒子-->
      <div class="top-left-div">
        <div v-for="item in colorList" :key="item.color"
             :class="[currentColor.color === item.color ? 'color-div-a' : 'color-div',]"
             :style="{ backgroundColor: item.color }"
             @click="changeColor(item)"
        ></div>
        <!--拾色器按钮-->
        <div class="getColor-div" title="拾色器">
          <img :src="colorImg"/>
          <input id="colorInp" type="color" class="color-inp"/>
        </div>
      </div>
      <!--右上角盒子-->
      <div class="top-right-div">
        <el-tooltip v-for="item in modelList" :key="item.model" class="item" effect="dark"
                    :content="item.name + '：' + item.msg" placement="bottom"
        >
          <el-button :class="[currentModel.model === item.model ? 'model-btn-a' : 'model-btn',]" type="primary" @click="changeModel(item)">
            <img :src="item.img"/>
          </el-button>
        </el-tooltip>

        <!--撤回-->
        <el-tooltip class="item" effect="dark" content="撤回" placement="bottom">
          <el-button type="success" class="download-btn" @click="handleBack">
            <i class="el-icon-back"></i>
          </el-button>
        </el-tooltip>

        <!--清空画布-->
        <el-tooltip class="item" effect="dark" content="清空标记" placement="bottom">
          <el-button type="primary" class="clear-btn" @click="clickClear">
            <i class="el-icon-delete"></i>
          </el-button>
        </el-tooltip>

        <!--关闭画布-->
        <el-tooltip class="item" effect="dark" content="关闭画布" placement="bottom">
          <el-button type="danger" class="download-btn" @click="handleClose">
            <i class="el-icon-close"></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <!--画布盒子-->
    <div class="middle-div">
      <div class="canvas-div">
        <!--画布-->
        <canvas id="myCanvas" :height="canvasSize.height" :width="canvasSize.width"
                :style="{cursor: isDrag ? 'grab' : 'default',top: canvasPosition.y + 'px',left: canvasPosition.x + 'px',}"
                @mousewheel="handleMouseWheel"
                @contextmenu="handleContextmenu"
                @mousedown="handleMousedown"
                @mouseup="handleMouseup"
                @mousemove="handleMousemove"
                @dblclick="handleDblclick"
        ></canvas>

        <!-- 测试保底方式 -->
        <span :style="'position: absolute;top:'+top+'px;left: '+left+'px;cursor: pointer;color:red;font-size:14px'">标记</span>
      </div>
    </div>

    <!--信息盒子-->
    <div v-if="false" v-show="isMsg" class="msg-div" :style="{top: mousePosition.y - 40 + 'px',left: mousePosition.x - 120 + 'px',}">
      x:{{ canvasMousePosition.x }},y:{{ canvasMousePosition.y }}
    </div>
  </div>
</template>
<script>
let ctx = ''                                                              // 画布上下文
export default {
  props: {
    canvasImage: { type: String, default: '' }
  },
  components: {},
  data() {
    return {
      canvasData: [],                                                     // 画布中图形数据
      isLoading: false,                                                   // 加载状态
      colorImg: require('@/assets/marker/color.png'),                     // 拾色器图标
      imgSize: { height: '', width: '' },                                 // 图片原始尺寸
      imgZoom: 1,                                                         // 图片缩放倍数(默认一倍)
      canvasSize: { height: '', width: '' },                              // 画布尺寸
      canvasPosition: { x: '', y: '' },                                   // 画布位置
      mousePosition: { x: '', y: '' },                                    // 屏幕中鼠标位置
      canvasMouseStart: { x: '', y: '' },                                 // 画布中鼠标开始点击位置
      canvasMousePosition: { x: '', y: '' },                              // 画布中鼠标位置
      isMouseDown: false,                                                 // 鼠标按下状态
      isDrag: false,                                                      // 拖拽状态
      dragStart: { x: '', y: '' },                                        // 开始拖拽的位置
      isMsg: false,                                                       // 信息盒子状态
      colorList: [                                                        // 颜色列表
        { color: '#ff7070' }, { color: '#ffffff' }, { color: '#000000' }, { color: '#00c79f' }, { color: '#9094fe' }],
      currentColor: {},                                                   //当前选中颜色
      modelList: [                                                        //模式列表
        { model: 'rectangle', name: '矩形模式', img: require('@/assets/marker/rectangle.png'), msg: '右键拖拽绘制' },
        { model: 'polygon', name: '多边形模式', img: require('@/assets/marker/polygon.png'), msg: '右键点击绘制，左键双击自动闭合' },
        { model: 'circle', name: '圆形模式', img: require('@/assets/marker/circle.png'), msg: '右键拖拽绘制' }
      ],
      currentModel: {},                                                   // 当前模式
      currentDrawData: {},                                                // 当前绘图数据
      base64: '',                                                         // 截图数据
      polygonTempList: [],                                                // 多边形临时列表
      currentBgImg: '',                                                   // 当前加载的背景图
      top: 0,
      left: 0
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    //加载背景图片
    this.loadBgImg(this.canvasImage).then((img) => {
      this.currentBgImg = img                                             // 存下加载完成后的背景图
      this.initCanvas(img)                                                // 图片加载完后初始化画布
    })
  },
  methods: {
    //必须异步加载图片
    loadBgImg(markImg) {
      let img = new Image()                                               // 创建img标签
      img.src = markImg                                                   // 添加src
      img.usemap = '#commodities'
      img.setAttribute('crossOrigin', 'Anonymous')
      return new Promise((resolve, reject) => {
        img.onload = () => {
          resolve(img)                                                    // 返回标签
        }
        img.onerror = (err) => {
          reject(err)
        }
      })
    },

    //初始化画布
    async initCanvas(img) {
      await (this.canvasSize = { height: img.height, width: img.width })  //通过图片尺寸设置画布尺寸
      this.imgSize = { height: img.height, width: img.width }             //记录下图片原始尺寸
      ctx = document.getElementById('myCanvas').getContext('2d') //获取上下文
      await ctx.drawImage(img, 0, 0, img.width, img.height)               //在canvas中绘制图片(图片、起始位置、绘图尺寸)
      let canvasDiv = document.getElementsByClassName('canvas-div')[0]
      this.canvasPosition = {
        x: canvasDiv.offsetWidth / 2 - img.width / 2,
        y: canvasDiv.offsetHeight / 2 - img.height / 2 - 25
      }                                                                   //背景居中
                                                                          //监听拾色器值的改变
      document
          .getElementById('colorInp')
          .addEventListener('input', this.getColorVal, false)
      this.currentModel = this.modelList[0]                               //默认绘图模式
      this.currentColor = this.colorList[0]                               //默认选中第一种颜色
    },

    //切换画笔颜色
    changeColor(data) {
      this.currentColor = data
    },

    //获取拾色器颜色值
    getColorVal(e) {
      this.currentColor = { color: e.target.value } //改变当前颜色
    },

    //切换画笔模式
    changeModel(data) {
      if (this.currentModel.model === 'polygon') {
        //切换模式之前为多边形模式时需要清空多边形的临时列表，重绘大列表
        this.polygonTempList = []
        ctx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height)
        ctx.drawImage(this.currentBgImg, 0, 0, this.canvasSize.width, this.canvasSize.height)
        this.drawToArr()
      }
      this.currentModel = data
    },

    //点击清空
    clickClear() {
      this.$confirm('确定清空当前标记数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            this.clearCanvas() //清空画布
            this.$message({
              type: 'success',
              message: '清空成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消清空'
            })
          })
    },

    //清空画布
    clearCanvas() {
      this.canvasData = [] //清空图形数据
      this.currentDrawData = {} //清空当前绘图数据
      this.polygonTempList = {} //清空多边形临时列表
      ctx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height) //清除画布图形
      ctx.drawImage(this.currentBgImg, 0, 0, this.canvasSize.width, this.canvasSize.height) //重绘背景
    },

    //点击上传
    clickUpload(e) {
      let file = e.target.files[0] //获取事件中的file对象
      let fileSize = Math.round(file.size / 1024) //获取文件大小（kb）
      if (fileSize > 2 * 1024) {
        this.$message.error('只能上传小于2M的jpg格式图片!')
        return //限制文件大小
      }
      const imgURL = window.URL.createObjectURL(file) //获取到图片路径
      this.loadBgImg(imgURL).then((img) => {
        this.currentBgImg = img                       //存下加载完成后的背景图
        this.initCanvas(img)                          //图片加载完后初始化画布
        this.clearCanvas()                            //清空画布
        this.recoverySize()                           //复原
      })
    },

    //点击下载
    async clickDownload() {
      this.isLoading = true
      await this.recoverySize() //复原
      await this.downloadImg(this.base64, 'imgMark') //调用下载
      this.isLoading = false
    },

    //复原
    async recoverySize() {
      await (this.imgZoom = 1) //复原图片缩放倍数
      await (this.canvasSize = this.imgSize) //复原尺寸
      let canvasDiv = document.getElementsByClassName('canvas-div')[0]
      this.canvasPosition = {}
      await (this.canvasPosition = {
        x: canvasDiv.offsetWidth / 2 - this.imgSize.width / 2,
        y: canvasDiv.offsetHeight / 2 - this.imgSize.height / 2 - 25
      }) //复原位置
      await ctx.drawImage(this.currentBgImg, 0, 0, this.imgSize.width, this.imgSize.height) //重绘背景
      await this.drawToArr() //重绘标记
      await (this.base64 = document
          .getElementById('myCanvas')
          .toDataURL('image/jpeg')) //获取canvas的base64
    },

    //用base64数据生成图片文件并下载
    downloadImg(content, fileName) {
      //下载base64图片
      let base64ToBlob = function(code) {
        let parts = code.split(';base64,')
        let contentType = parts[0].split(':')[1]
        let raw = window.atob(parts[1])
        let rawLength = raw.length
        let uInt8Array = new Uint8Array(rawLength)
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i)
        }
        //返回一个Blob
        return new Blob([uInt8Array], {
          type: contentType
        })
      }
      let aLink = document.createElement('a') //创建a标签
      let blob = base64ToBlob(content) //获取Blob
      let evt = document.createEvent('HTMLEvents') //创建事件
      evt.initEvent('click', true, true) //事件类型，是否冒泡，是否阻止浏览器默认行为
      aLink.download = fileName //赋值下载名字
      aLink.href = URL.createObjectURL(blob) //赋值a标签的href
      aLink.click() //点击a标签触发事件
    },

    //阻止默认右键冒泡事件，去除右键菜单
    handleContextmenu(e) {
      e.preventDefault()
    },

    //鼠标滚动事件(wheelDelta值上滚为负下滚为正)
    async handleMouseWheel(e) {
      let el = document.getElementById('myCanvas')
      let oldX = el.offsetLeft //旧位置
      let oldY = el.offsetTop
      await this.changeCanvas(e, oldX, oldY) //改变画布
      //使用改变后的此村绘制图片
      await ctx.drawImage(
          this.currentBgImg,
          0,
          0,
          this.canvasSize.width,
          this.canvasSize.height
      )
      await this.drawToArr() //重绘列表数据
    },

    //滚动时改变画布
    changeCanvas(e, oldX, oldY) {
      let zoomSpeed = 1.2 //缩放速度
      e.wheelDelta < 0 && (zoomSpeed = 2 - zoomSpeed) //判断放大与缩小
      let posX = e.offsetX //获取鼠标定点的位置（鼠标在图片上的位置）
      let posY = e.offsetY
      let oldImgZoom = this.imgZoom //记录下旧的图片缩放倍数
      this.imgZoom = this.imgZoom * zoomSpeed //更新缩放倍数
      let minZoom = 0.3 //最小缩放倍数
      let maxZoom = 3 //最大缩放倍数
      this.imgZoom > maxZoom && (this.imgZoom = maxZoom) //限制缩放倍数
      this.imgZoom < minZoom && (this.imgZoom = minZoom)
      zoomSpeed = this.imgZoom / oldImgZoom //更新缩放速度
      let height = Math.round(this.imgSize.height * this.imgZoom) //计算画布新宽高(原始宽高乘缩放倍数)
      let width = Math.round(this.imgSize.width * this.imgZoom)
      let newX = oldX + Math.round(posX * (1 - zoomSpeed)) //计算画布新位置(旧位置加偏移量)
      let newY = oldY + Math.round(posY * (1 - zoomSpeed))
      this.canvasSize = { height: height, width: width } //更新画布尺寸
      this.canvasPosition = { x: newX, y: newY } //更新画布位置
    },

    //鼠标按下事件
    handleMousedown(e) {
      if (e.button === 0 || e.button === '0') {
        this.isDrag = true //左键按下打开拖拽
        let el = document.getElementById('myCanvas')
        this.dragStart = { x: el.offsetLeft - e.screenX, y: el.offsetTop - e.screenY } //记录下开始拖拽的偏移量
        // 这里是图层标记的位置，加减是为了不影响鼠标移动图片
        this.top = e.offsetY + this.canvasPosition.y - 20
        this.left = e.offsetX + this.canvasPosition.x - 10
        return
      }

      if (e.button !== 2) return //右键绘图
      this.isMouseDown = true //打开鼠标状态
      //获取画布中鼠标开始点击位置
      this.canvasMouseStart = { x: e.offsetX, y: e.offsetY }
    },

    //鼠标移动事件
    async handleMousemove(e) {
      if (this.isDrag) {
        this.mouseDrag(e) //处理拖拽
        return
      }
      this.isMsg = true
      //获取屏幕中鼠标位置(显示实时坐标)
      this.mousePosition = {
        x: e.pageX,
        y: e.pageY
      }
      //获取画布中鼠标位置
      this.canvasMousePosition = {
        x: e.offsetX,
        y: e.offsetY
      }
      //判断是否超出边界
      if (e.offsetX < 0 || e.offsetY < 0 || e.offsetX === 0 || e.offsetY === 0 || e.offsetX === '0' || e.offsetY === '0') {
        this.isMsg = false
        this.isMouseDown = false //关闭鼠标状态
      }
      //判断鼠标状态是否打开
      if (!this.isMouseDown) {
        return
      }
      ctx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height) //清除画布后立刻重新绘制视觉上形成动画
      await ctx.drawImage(
          this.currentBgImg,
          0,
          0,
          this.canvasSize.width,
          this.canvasSize.height
      ) //在canvas中绘制图片
      await this.drawToArr() //重绘列表数据
      //绘制点
      if (this.currentModel.model === 'point') {
        return
      }
      //绘制直线
      if (this.currentModel.model === 'beeline') {
        this.drawBeeline(e)
      }
      //绘制矩形
      if (this.currentModel.model === 'rectangle') {
        this.drawRectangle(e)
      }
      //绘制圆形
      if (this.currentModel.model === 'circle') {
        this.drawCircle(e)
      }
    },

    //鼠标拖拽
    mouseDrag(e) {
      this.canvasPosition.x = e.screenX + this.dragStart.x //计算出画布位置
      this.canvasPosition.y = e.screenY + this.dragStart.y
    },

    //通过保存的大列表绘制图形
    async drawToArr() {
      //遍历大列表开始绘制
      await this.canvasData.forEach((e) => {
        //绘制点
        if (e.type === 'point') {
          ctx.beginPath()
          ctx.arc(e.data[0][0] * this.imgZoom, e.data[0][1] * this.imgZoom, 10, 0, 2 * Math.PI)
          ctx.fillStyle = e.color
          ctx.strokeStyle = e.color
          ctx.fill()
          ctx.stroke()
        }
        //绘制直线
        if (e.type === 'beeline') {
          ctx.beginPath()
          ctx.moveTo(e.data[0][0] * this.imgZoom, e.data[0][1] * this.imgZoom)
          ctx.lineTo(e.data[1][0] * this.imgZoom, e.data[1][1] * this.imgZoom)
          ctx.strokeStyle = e.color
          ctx.stroke()
        }
        //绘制矩形
        if (e.type === 'rectangle') {
          ctx.beginPath()
          ctx.strokeStyle = e.color
          ctx.strokeRect(
              e.data[0][0] * this.imgZoom,
              e.data[0][1] * this.imgZoom,
              e.data[1][0] * this.imgZoom - e.data[0][0] * this.imgZoom,
              e.data[1][1] * this.imgZoom - e.data[0][1] * this.imgZoom
          ) //绘制矩形边框
        }
        //绘制多边形
        if (e.type === 'polygon') {
          ctx.beginPath()
          ctx.strokeStyle = e.color
          ctx.moveTo(e.data[0][0] * this.imgZoom, e.data[0][1] * this.imgZoom) //起始点
          //遍历多边形点列表连续绘制
          e.data.forEach((p) => {
            ctx.lineTo(p[0] * this.imgZoom, p[1] * this.imgZoom)
          })
          ctx.stroke()
        }
        //绘制圆形
        if (e.type === 'circle') {
          ctx.beginPath()
          ctx.arc(
              e.data[0][0] * this.imgZoom,
              e.data[0][1] * this.imgZoom,
              e.r * this.imgZoom,
              0,
              2 * Math.PI
          )
          ctx.strokeStyle = e.color
          ctx.stroke() //绘制线条
        }
      })
      //判断多边形临时列表是否有数据
      if (this.polygonTempList.data && this.polygonTempList.data.length > 1) {
        ctx.beginPath()
        ctx.strokeStyle = this.polygonTempList.color
        ctx.moveTo(
            this.polygonTempList.data[0][0] * this.imgZoom,
            this.polygonTempList.data[0][1] * this.imgZoom
        ) //起始点
        //遍历多边形点列表连续绘制
        this.polygonTempList.data.forEach((p) => {
          ctx.lineTo(p[0] * this.imgZoom, p[1] * this.imgZoom)
        })
        //通过状态判断多边形是否闭合
        if (this.polygonTempList.isClose) {
          ctx.closePath() //闭合
        }
        ctx.stroke()
      }
    },

    //鼠标松开事件
    handleMouseup(e) {
      if (e.button === 0 || e.button === '0') {
        this.isDrag && (this.isDrag = false) //左键松开关闭拖拽
      }
      if (e.button !== 2) {
        return //非右键松开
      }
      //点模式的松开
      if (this.currentModel.model === 'point') {
        this.drawPoint(e) //用鼠标松开时的位置画点
        this.currentDrawData.data.forEach((e) => {
          e[0] = e[0] / this.imgZoom //将坐标数据还原至真实数据
          e[1] = e[1] / this.imgZoom
        })
        this.canvasData.push(this.currentDrawData) //添加当前绘图数据至大列表
      }
      //线模式、直线模式、矩形模式、圆形模式的松开
      if (
          this.currentModel.model === 'line' ||
          this.currentModel.model === 'beeline' ||
          this.currentModel.model === 'rectangle' ||
          this.currentModel.model === 'circle'
      ) {
        this.currentDrawData.data.forEach((e) => {
          e[0] = e[0] / this.imgZoom //还原真实坐标
          e[1] = e[1] / this.imgZoom
        })
        this.currentModel.model === 'circle' &&
        (this.currentDrawData.r = this.currentDrawData.r / this.imgZoom) //圆形模式需要处理半径
        this.canvasData.push(this.currentDrawData) //添加当前绘图数据
      }
      //多边形模式的松开
      if (this.currentModel.model === 'polygon') {
        this.constructPolygonData(e) //构造多边形数据
        this.drawToArr() //多边形模式中每次鼠标松开后都需要重绘列表数据
        //更新多边形画线时起点位置
        this.canvasMouseStart = {
          x: e.offsetX / this.imgZoom, //还原真实坐标
          y: e.offsetY / this.imgZoom
        }
      }
      this.isMouseDown = false //关闭鼠标状态
      this.canvasMousePosition = {
        x: e.offsetX, //更新位置
        y: e.offsetY
      }
    },

    //生成多边形数据
    constructPolygonData(e) {
      if (this.polygonTempList.data) {
        let oldPointX =
            this.polygonTempList.data[this.polygonTempList.data.length - 1][0]
        let oldPointY =
            this.polygonTempList.data[this.polygonTempList.data.length - 1][1]
        let newPointX = e.offsetX / this.imgZoom //计算出真实坐标
        let newPointY = e.offsetY / this.imgZoom
        //多边形需防止坐标重复
        if (oldPointX !== newPointX || oldPointY !== newPointY) {
          //非第一次松开直接push多边形点列表
          this.polygonTempList.data.push([newPointX, newPointY])
        }
      } else {
        //第一次松开则构造完整数据
        this.polygonTempList = {
          type: 'polygon',
          color: this.currentColor.color,
          data: [[e.offsetX / this.imgZoom, e.offsetY / this.imgZoom]]
        }
      }
    },

    //双击事件
    handleDblclick() {
      //双击闭合多边形条件为：模式为多边形模式、坐标数量至少为3、多边形闭合状态为false
      if (this.currentModel.model === 'polygon' && this.polygonTempList.data.length >= 3 && !this.polygonTempList.isClose) {
        this.polygonTempList.isClose = true //改变多边形的闭合状态
        this.polygonTempList.data.push(this.polygonTempList.data[0]) //添加起点
        this.canvasData.push(this.polygonTempList) //将多边形的临时数据添加到大列表中
        this.polygonTempList = {} //置空多边形临时列表
        this.drawToArr() //绘制大列表
      }
    },

    //画点
    drawPoint(e) {
      //获取画布中鼠标坐标
      this.canvasMousePosition = {
        x: e.offsetX,
        y: e.offsetY
      }
      ctx.beginPath() //新建路径
      //arc参数为：x,y，半径、起始角、终止角
      ctx.arc(
          this.canvasMousePosition.x,
          this.canvasMousePosition.y,
          10,
          0,
          2 * Math.PI
      )
      ctx.fillStyle = this.currentColor.color //填充颜色
      ctx.strokeStyle = this.currentColor.color //线条颜色
      ctx.fill() //填充
      ctx.stroke() //绘制线条
      //生成点绘图数据
      this.currentDrawData = {
        type: 'point',
        color: this.currentColor.color,
        data: [[e.offsetX, e.offsetY]]
      }
    },

    //画直线
    drawBeeline(e) {
      ctx.beginPath()
      ctx.strokeStyle = this.currentColor.color
      ctx.moveTo(this.canvasMouseStart.x, this.canvasMouseStart.y) //画笔移动至(x,y)坐标
      ctx.lineTo(e.offsetX, e.offsetY) //绘直线至(x,y)坐标
      ctx.stroke()
      //生成直线绘图数据
      this.currentDrawData = {
        type: 'beeline',
        color: this.currentColor.color,
        data: [
          [this.canvasMouseStart.x, this.canvasMouseStart.y],
          [e.offsetX, e.offsetY]
        ]
      }
    },

    //画矩形
    drawRectangle(e) {
      ctx.beginPath()
      ctx.strokeStyle = this.currentColor.color
      //绘制矩形边框
      ctx.strokeRect(
          this.canvasMouseStart.x,
          this.canvasMouseStart.y,
          e.offsetX - this.canvasMouseStart.x,
          e.offsetY - this.canvasMouseStart.y
      )
      //生成矩形数据
      this.currentDrawData = {
        type: 'rectangle',
        color: this.currentColor.color,
        data: [
          [this.canvasMouseStart.x, this.canvasMouseStart.y],
          [e.offsetX, e.offsetY]
        ]
      }
    },

    //画圆
    drawCircle(e) {
      this.canvasMousePosition = {
        x: e.offsetX,
        y: e.offsetY
      }
      let { x, y } = this.canvasMouseStart
      let r = Math.round(
          Math.sqrt(
              (e.offsetX - x) * (e.offsetX - x) + (e.offsetY - y) * (e.offsetY - y)
          )
      )
      ctx.beginPath() //新建路径
      ctx.arc(x, y, r, 0, 2 * Math.PI)
      ctx.strokeStyle = this.currentColor.color //线条颜色
      ctx.stroke() //绘制线条
      //生成点绘图数据
      this.currentDrawData = {
        type: 'circle',
        data: [[x, y]],
        r: r,
        color: this.currentColor.color
      }
    },

    //画多边形
    drawPolygon(e) {
      ctx.beginPath()
      ctx.strokeStyle = this.currentColor.color
      ctx.moveTo(this.canvasMouseStart.x, this.canvasMouseStart.y)
      ctx.lineTo(e.offsetX, e.offsetY)
      ctx.stroke()
    },

    /** 返回上一个页面 */
    handleBack() {
      console.log(this.canvasData)
    },

    /** 返回上一个页面 */
    handleClose() {
      this.$emit('closeCanvas', '')
      // 返回上一步
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  user-select: none;
  height: 100%;
  width: 100%;

  .top-tool {
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: rgba(39, 55, 70, 1);

    .top-left-div {
      display: flex;

      .color-div-a,
      .color-div {
        border-radius: 50%;
        height: 40px;
        width: 40px;
        margin: 5px 10px;

        &:hover {
          cursor: pointer;
          box-shadow: 0px 0px 10px #fff;
        }
      }

      .color-div-a {
        box-shadow: 0px 0px 10px #fff;
      }

      .getColor-div {
        position: relative;
        margin: 5px 10px;

        img {
          position: absolute;
          top: 0;
          height: 40px;
          width: 40px;
          border-radius: 50%;
        }

        input {
          z-index: 10;
          border-radius: 50%;
          position: absolute;
          top: 0;
          background-color: transparent;
          height: 40px;
          width: 40px;
          opacity: 0;
          border: 0px;
          cursor: pointer;
        }
      }
    }

    .top-right-div {
      margin: 0px;
      display: flex;

      .model-btn,
      .model-btn-a {
        background-color: #455769;
        border: 0px;
        padding: 9px 15px;
        margin: auto 10px;

        img {
          height: 20px;
          width: 20px;
        }
      }

      .model-btn-a {
        border: 0px;
        background-color: rgba(255, 255, 255, 0.5);
      }

      .download-btn,
      .clear-btn {
        margin: auto 10px;
        padding: auto;
      }

      .upload-btn {
        margin: auto 10px;
        height: 40px;
        width: 50px;
        padding: 0px;
        position: relative;

        input {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 10;
          width: 100%;
          height: 100%;
          opacity: 0;
          border: 0px;
        }
      }
    }
  }

  .middle-div {
    width: 100%;
    height: calc(100% - 50px);

    .canvas-div {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;

      #myCanvas {
        background-color: rgba(255, 255, 255, 1);
        position: absolute;
      }
    }
  }

  .msg-div {
    position: absolute;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    padding: 5px 20px;
  }
}
</style>
